import React from 'react';
import { Card, Tag, Button, Space, message } from 'antd';
import { ShoppingCartOutlined, ShoppingOutlined } from '@ant-design/icons';
import type { Course } from '../api/divide/course/types.gen';
import { useCart } from '../hooks/useCart';
import { formatPrice, formatDuration, getLevelColor } from '../utils/course';

interface CourseCardProps {
  course: Course;
  onCardClick?: () => void;
  onAddToCart?: (course: Course) => void;
  onToggleFavorite?: (course: Course) => void;
  isFavorite?: boolean;
}

const CourseCard: React.FC<CourseCardProps> = ({
  course,
  onCardClick,
  onAddToCart,
  onToggleFavorite,
  isFavorite = false
}) => {
  const { addToCart, isAdding } = useCart();

  return (
    <Card
      hoverable
      onClick={onCardClick}
      cover={
        <div style={{ 
          height: 200, 
          backgroundColor: '#f0f2f5',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden'
        }}>
          {course.coverImage ? (
            <img 
              alt={course.title}
              src={course.coverImage}
              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            />
          ) : (
            <div style={{ color: '#999' }}>暂无图片</div>
          )}
        </div>
      }
      actions={[
        <Button 
          key="cart" 
          type="text" 
          icon={<ShoppingCartOutlined />}
          loading={isAdding}
          onClick={(e) => {
            e.stopPropagation();
            addToCart({
              courseId: course.id!,
              quantity: 1
            });
          }}
        >
          加入购物车
        </Button>,
        <Button 
          key="buy" 
          type="text" 
          icon={isFavorite ? <ShoppingOutlined style={{ color: '#52c41a' }} /> : <ShoppingOutlined />}
          onClick={(e) => {
            e.stopPropagation();
            onToggleFavorite?.(course);
          }}
        >
          {isFavorite ? '已购买' : '购买'}
        </Button>
      ]}
    >
      <Card.Meta
        title={
          <div style={{ 
            fontSize: 16, 
            fontWeight: 600,
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
          }}>
            {course.title}
          </div>
        }
        description={
          <div>
            <div style={{ 
              color: '#666', 
              marginBottom: 8,
              height: 44,
              overflow: 'hidden',
              display: '-webkit-box',
              WebkitLineClamp: 2,
              WebkitBoxOrient: 'vertical'
            }}>
              {course.description || '暂无描述'}
            </div>
            <Space direction="vertical" size="small" style={{ width: '100%' }}>
              <Space>
                <Tag color={getLevelColor(course.level || '')}>
                  {course.level}
                </Tag>
                <Tag color="blue">
                  {formatDuration(course.duration)}
                </Tag>
              </Space>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 18, fontWeight: 600, color: '#ff4d4f' }}>
                  {formatPrice(course.price)}
                </span>
                <span style={{ fontSize: 12, color: '#999' }}>
                  已售{course.soldCount || 0}
                </span>
              </div>
            </Space>
          </div>
        }
      />
    </Card>
  );
};

export default CourseCard;